<template>
  <div class="u-main-content" style="background-color:#f5f7f9;">
    <Split v-model="split" max="1000" min="300" class="split-device--content">
      <div slot="left">
        <filter-device :companyId="companyId" @on-choose="dispatchSelect" />
      </div>
      <div slot="right" style="margin:20px 15px;">
        <Row :gutter="16">
          <template v-if="deviceTypeShow">
            <Col span="16">
              <device-card :row="deviceDetail"></device-card>
            </Col>
            <Col span="8">
              <command-card :id="keyId" :userRole="userRole"></command-card>
            </Col>
          </template>
          <template v-else>
            <Col span="24">
              <device-card :row="deviceDetail"></device-card>
            </Col>
          </template>
        </Row>

        <!-- 重要数据监控 -->
        <data-card :id="keyId" :deviceId="deviceId"></data-card>

        <!-- 统计图 -->
        <Row style="margin-top:20px;" :gutter="16" v-if="!hideBottom">
          <Col :span="12">
            <left-chart :id="keyId" :deviceId="deviceId"></left-chart>
          </Col>
          <Col :span="12">
            <right-chart :id="keyId" :deviceId="deviceId"></right-chart>
          </Col>
        </Row>
      </div>
    </Split>
  </div>
</template>
<script>
import PermissionMixin from "../PermissionMixin";
import FilterDevice from "./FilterDevice";
import CommandCard from "./CommandCard";
import DeviceCard from "./DeviceCard";
import DataCard from "./DataCard";
import RightChart from "./RightChart";
import LeftChart from "./LeftChart";

import { getDeviceDetail as httpGetDevice } from "@/api";

export default {
  mixins: [PermissionMixin],
  components: {
    "filter-device": FilterDevice,
    "command-card": CommandCard,
    "device-card": DeviceCard,
    "data-card": DataCard,
    "right-chart": RightChart,
    "left-chart": LeftChart
  },
  data() {
    return {
      split: 0.2,
      deviceDetail: null,
      deviceId: "", // 用户输入的设备ID
      keyId: "", // 数据库主键设备ID
      hideBottom: false,
      deviceTypeShow: false
    };
  },
  methods: {
    init() {
      const vm = this;
      const id = this.keyId;
      httpGetDevice(id).then(res => {
        if (res.data) {
          if (res.data.hardwareType === 6 || res.data.hardwareType === 7) {
            vm.hideBottom = true;
          } else {
            vm.hideBottom = false;
          }
          const deviceSeries = res.data.deviceSeries;
          if (res.data.masterId) {
            vm.deviceTypeShow = false;
          } else {
            if (deviceSeries) {
              vm.deviceTypeShow = !~deviceSeries.indexOf("117");
            }
          }

          this.deviceDetail = res.data;
        } else {
          this.deviceDetail = null;
        }
      });
    },

    dispatchSelect(device) {
      this.deviceId = device.deviceId;
      this.keyId = device.id;
      this.init();
    }
  }
};
</script>
<style>
.split-device--content .right-pane.ivu-split-pane {
  height: 100%;
  overflow-y: auto;
}
</style>
